<template>
  <div class="homemenu">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '260px'">
        <h1 class="title-main">
          <i class="logo">
            <img src="../assets/img/log.png" alt />
          </i>
          <span :class="{ text: true, anima: isCollapse }">商标后台管理系统</span>
        </h1>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#304156"
          text-color="#fff"
          active-text-color="rgb(24, 144, 255)"
        >
          <el-menu-item index="1" @click="homelink">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>线上预约</span>
            </template>
            <el-menu-item index="2-1" class="menu-item" @click="uplink1">审核列表</el-menu-item>
            <el-menu-item index="2-2" class="menu-item" @click="uplink2">预约列表</el-menu-item>
            <el-menu-item index="2-3" class="menu-item" @click="uplink3">预约额度设置</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" @click="offlinelink">
            <i class="el-icon-s-claim"></i>
            <span slot="title">线下预约</span>
          </el-menu-item>
          <el-menu-item index="4" @click="operationlink">
            <i class="el-icon-menu"></i>
            <span slot="title">业务管理</span>
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span>短信管理</span>
            </template>
            <el-menu-item index="5-1" class="menu-item" @click="smmbtn1">短信列表</el-menu-item>
            <!-- <el-menu-item index="5-2" class="menu-item" @click="smmbtn2"
              >短信模板</el-menu-item
            >-->
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>证书发放</span>
            </template>
            <el-menu-item index="6-1" class="menu-item" @click="outbtn">证书批次列表</el-menu-item>
            <el-menu-item index="6-2" class="menu-item" @click="creList">证书列表</el-menu-item>
          </el-submenu>

          <el-submenu index="7">
            <!-- <el-menu-item index="7" @click="statisData"> -->
            <!-- <i class="el-icon-menu"></i>
            <span slot="title">数据统计</span>-->
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>数据统计</span>
              <!-- <span>线上预约</span> -->
            </template>
            <el-menu-item index="10" class="menu-item" @click="yearSummary">年度报表</el-menu-item>
            <el-menu-item index="11" class="menu-item" @click="acceptWindow">受理窗口业务汇总</el-menu-item>
            <!-- </el-menu-item> -->
          </el-submenu>

          <!-- <el-menu-item index="10" @click="yearSummary">
            <i class="el-icon-menu"></i>
            <span slot="title">年度报表</span>
          </el-menu-item>
          <el-menu-item index="11" @click="acceptWindow">
            <i class="el-icon-office-building"></i>
            <span slot="title">受理窗口业务汇总</span>
          </el-menu-item>-->

          <el-menu-item index="8" @click="returnstatic">
            <i class="el-icon-s-management"></i>
            <span slot="title">回文统计</span>
          </el-menu-item>
          <el-menu-item index="9" @click="userinfostatic">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户资料统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-left">
            <i
              :class="{
                'el-icon-s-fold': !isCollapse,
                'el-icon-s-unfold': isCollapse,
                'pack-icon': true,
              }"
              @click="pickOff"
            ></i>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <p class="header-text">
              <i class="el-icon-user"></i>
              <b>角色:</b>
              <span>管理员</span>
            </p>
            <p class="header-text">
              <i class="el-icon-position"></i>
              <b>网点:</b>
              <span>武侯区</span>
            </p>

            <el-dropdown @command="handleCompanyChange">
              <span class="el-dropdown-link">
                <div class="block">
                  <el-avatar shape="square" :size="40" :src="squareUrl"></el-avatar>
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      isCollapse: false, // 是否水平折叠收起菜单
      squareUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 头像图标
    };
  },
  watch: {},
  computed: {},
  methods: {
    //退出登录
    handleCompanyChange(command) {
      if (command == 1) {
        sessionStorage.removeItem("token");
        this.$router.push({
          path: "/login",
        });
      }
    },
    handleOpen(key, keyPath) {
      // //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // //console.log(key, keyPath);
    },
    // 导航菜单收起与展开
    pickOff() {
      this.isCollapse = !this.isCollapse;
    },

    // 首页
    homelink() {
      this.$router.push({
        path: "/home",
      });
    },
    // 审核列表
    uplink1() {
      this.$router.push({
        path: "/audit",
      });
    },
    // 预约列表
    uplink2() {
      this.$router.push({
        path: "/appointment",
      });
    },
    // 预约额度设置
    uplink3() {
      this.$router.push({
        path: "/colTime",
      });
    },
    // 线下预约
    offlinelink() {
      this.$router.push({
        path: "/offline",
      });
    },
    // 业务管理
    operationlink() {
      this.$router.push({
        path: "/operation",
      });
    },
    // 短信列表
    smmbtn1() {
      this.$router.push({
        path: "/SMS",
      });
    },
    // 短信模板
    // smmbtn2() {
    //   this.$router.push({
    //     path: "/SMSTemplate",
    //   });
    // },
    // 证书批次列表
    outbtn() {
      this.$router.push({
        path: "/batchList",
      });
    },
    // 证书列表
    creList() {
      this.$router.push({
        path: "/certificateList",
      });
    },
    // 数据统计
    statisData() {
      this.$router.push({
        path: "/datastatistics",
      });
    },
    // 回文统计
    returnstatic() {
      this.$router.push({
        path: "/reutrnstatic",
      });
    },
    // 用户资料统计
    userinfostatic() {
      this.$router.push({
        path: "/userinfostatis",
      });
    },
    // 年度汇总表
    yearSummary() {
      this.$router.push({
        path: "/yearSummary",
      });
    },
    // 受理窗口汇总
    acceptWindow() {
      this.$router.push({
        path: "/acceptWindow",
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
body,
html {
  height: 100% !important;
}
.el-aside {
  min-height: 1040px;
  background-color: #304156;
  color: #fff;
  transition: all 0.4s ease-in;

  .title-main {
    width: 100%;
    height: 60px;
    background-color: #2b2f3a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-family: "宋体";
    .logo {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .text {
      white-space: nowrap;
      width: 150px;
      opacity: 1;
      text-align: center;
      overflow: hidden;
      transition: all 0.5s ease-in;
    }
    .anima {
      width: 0px;
      opacity: 0;
    }
  }
  /deep/.el-menu {
    border-right: none;
    /deep/.menu-item {
      background-color: #1f2d3d !important;
      &:hover {
        background-color: #001528 !important;
      }
    }
  }
}
.el-header {
  min-width: 1200px;
  box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .pack-icon {
    font-size: 25px;
    cursor: pointer;
    vertical-align: middle;
  }
  .el-breadcrumb {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
    margin-left: 20px;
    margin-top: 2px;
  }
  .header-right {
    display: flex;

    align-items: center;
    .header-text {
      margin-right: 20px;
      b {
        margin-right: 5px;
        font-size: 15px;
      }

      i {
        font-size: 19px;
        margin-right: 5px;
      }
      span {
        font-size: 15px;
        color: rgb(22, 31, 82);
      }
    }
  }
}
.el-main {
  min-width: 1200px;
  background-color: #f1f1f1;
}
#dropdown-menu-2328 {
  min-width: 100px;
}
.el-icon-user {
  color: #2c9dfc;
  font-weight: bold;
}
.el-icon-position {
  color: #ee9900;
  font-weight: bold;
}
//.el-table .cell {
//  overflow: hidden !important;
//  text-overflow: ellipsis !important;
//  white-space: nowrap !important;
//  word-break: break-word !important;
//}
</style>
